<template>
  <div id="teamCardList">
    <van-card
        v-for="team in props.teamList"
        :key="team.id"
        :desc="team.description"
        :thumb="team.avatarUrl"
        :title="`${team.name}`"
    >
      <template #tags>
        <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px">
          {{ teamStatusEnum[team.status] }}
        </van-tag>
      </template>
      <template #bottom>
        <div>队伍人数: {{ `${team.hasJoinNum}/${team.maxNum}` }}</div>
        <div>过期时间：{{ team.expireTime }}</div>
        <div>创建时间：{{ team.createTime }}</div>
      </template>
      <template #footer>
        <van-button
            v-if="team.userId === currentUser?.id"
            size="small" plain type="primary" @click="preJoinTeam(team)">
          加入队伍
        </van-button>


        <van-button
            size="mini"
            plain
            type="primary"
            @click="doUpdateTeam(team.id)"
        >
          更新队伍
        </van-button>


        <van-button size="mini" plain type="primary"
                    @click="doQuitTeam(team.id)">退出队伍
        </van-button>

        <van-button
            v-if="team.userId !== currentUser?.id"
            size="mini"
            plain
            type="primary"
            @click="doDeleteTeam(team.id)"
        >
          解散队伍
        </van-button>

        <!-- 添加密码输入对话框 -->
        <van-dialog v-model:show="showPasswordDialog" title="输入密码" show-cancel-button @confirm="doJoinTeam">
          <van-field v-model="password" type="password" placeholder="请输入密码" />
        </van-dialog>
      </template>
    </van-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"; // 补充导入onMounted
import { useRouter } from "vue-router";
import { Toast, Dialog } from "vant"; // 补充导入Dialog
import myAxios from "../plugins/myAxios.ts";
import {getCurrentUser} from "../services/user";
// 确保Team类型已正确定义或导入
// import { TeamType } from "../models/team"; // 需要根据实际路径调整

const showPasswordDialog = ref(false);
const password = ref('');
const joinTeamId = ref(0);
let currentUser = ref(null);

const router = useRouter();

const props = defineProps({
  teamList: {
    type: Array,
    required: true,
  },
});

const teamStatusEnum = {
  0: "公开",
  1: "私有",
  2: "加密",
};

onMounted(async () => {
  currentUser.value = await getCurrentUser();
});

const preJoinTeam = (team) => {
  joinTeamId.value = team.id;
  if (team.status === 0) {
    doJoinTeam();
  } else {
    showPasswordDialog.value = true;
  }
};

const doJoinCancel = () => {
  joinTeamId.value = 0;
  password.value = '';
};

const doJoinTeam = async () => {
  if (!joinTeamId.value) return;

  try {
    const res = await myAxios.post("/team/join", {
      teamId: joinTeamId.value,
      password: password.value,
    });

    if (res?.code === 0) {
      Toast.success("加入成功");
      doJoinCancel();
    } else {
      Toast.fail(res?.message || "加入失败");
    }
  } catch (error) {
    Toast.fail("网络错误");
  }
};


const doUpdateTeam = (teamId) => {
  // 这里可以添加一些逻辑，比如验证用户是否有权限更新队伍
  router.push({ path: `/team/update/${teamId}`, replace: true });
};


const doQuitTeam = (teamId) => {
  myAxios.post('/team/quit', { id: teamId })
      .then((res) => {
        if (res?.code === 0) {
          Toast.success("解散成功");
        } else {
          Toast.fail(res?.message || "解散失败");
        }
      })
      .catch((error) => {
        Toast.fail("网络错误");
      });
};

const doDeleteTeam = (teamId) => {
  const res= myAxios.post('/team/delete', { id: teamId })
  console.log("doDeleteTeam:"+res)
};


</script>